<template>
  <div class="App">
    <h1>名字：{{ name }},价格：{{ price }}</h1>
    <Child></Child>
  </div>
</template>

<script>
import Child from './components/Child'
import  { provide,reactive,toRefs } from 'vue'
export default {
  name:'App',
  components:{
     Child
  },
  setup () {
    
    let car = reactive({
      name:'奔驰',
      price:'40k'
    })

    provide('car',car);
    return { ...toRefs(car)}
  }
}
</script>

<style lang="css" scoped>
  .App{
    background-color: gray;
    padding: 10px;
  }
</style>